<template>
    <div class="headSearch">
        <el-input
            v-model="inputValue"
            placeholder="Please input"
            class="input-with-select"
        >
            <template #prepend>
                <el-select v-model="select" placeholder="选择搜索项">
                    <el-option label="Restaurant" value="1"/>
                    <el-option label="Order No." value="2"/>
                    <el-option label="Tel" value="3"/>
                </el-select>
            </template>
            <template #append>
                <el-button icon="el-icon-search"/>
            </template>
        </el-input>
        <div class="search-area">
            <slot/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HeadSearch',
    data() {
        return {
            inputValue: '',
            select: ''
        }
    }
}
</script>

<style lang="scss" scoped>
.headSearch {
    margin-top: 5px;
    height: 50px;
    .search-area {
        padding: 10px;
        width: 30%;
        float: left;
    }
    ::v-deep .el-select .el-input__inner {
        cursor: pointer;
        display: inline-flex;
        width: auto;
    }
}
</style>
